<template>
    <div>
        <tab :line-width="1" v-model="index">
            <tab-item selected>手机绑定</tab-item>
            <tab-item>修改密码</tab-item>
            <tab-item disabled>邮箱绑定</tab-item>
            <!-- <tab-item>重设密码</tab-item> -->
        </tab>
        <swiper v-model="index" :show-dots="false" height="500px">
            <swiper-item>
                <group title="">
                    <x-input ref="inpReset" title="手机号" v-model="mobile" placeholder-align="right" required is-type="china-mobile" placeholder="请输入绑定手机号"></x-input>
                    <!-- <x-input required title="验证码" placeholder-align="right" class="weui-cell_vcode">
                        <img slot="right" class="weui-vcode-img" src="http://weui.github.io/weui/images/vcode.jpg">
                    </x-input> -->
                    <x-input ref="inpReset1" title="验证码" v-model="verifycode" required placeholder-align="right" class="weui-vcode">
                        <x-button slot="right" :disabled="cding" type="primary" @click.native="getMobCode()" mini>{{cdbtnStr}}{{(smsCodeCD>0 && smsCodeCD
                            <60)?( "("+smsCodeCD+ ")"): '' }}</x-button>
                    </x-input>
                </group>
                <div style="padding:15px;">
                    <x-button type="primary" @click.native="doBindMob()">确定</x-button>
                </div>
            </swiper-item>
            <swiper-item>
                <group>
                    <x-input ref="inpReset2" required title="旧密码" v-model.trim="oldpassword" placeholder-align="right" placeholder="请输入6-20位密码" :min="6" :max="20"></x-input>
                    <x-input ref="inpReset3" type="password" required title="新密码" v-model.trim="password" placeholder-align="right" placeholder="请输入6-20位密码" :min="6" :max="20"></x-input>
                    <x-input ref="inpReset4" type="password" required title="确认新密码" v-model.trim="password2" placeholder-align="right" placeholder="请再次输入密码" :min="6" :max="20"></x-input>
                    <div style="padding:15px;">
                        <x-button type="primary" @click.native="doUpdate()">确定</x-button>
                    </div>
                </group>
            </swiper-item>
            <swiper-item>
                <group>
                    <x-input required title="邮箱" placeholder-align="right" is-type="email" placeholder="请输入绑定邮箱"></x-input>
                    <x-input required title="验证码" placeholder="短信6位数字" placeholder-align="right" class="weui-vcode">
                        <x-button slot="right" type="primary" mini>获取</x-button>
                    </x-input>
                </group>
                <div style="padding:15px;">
                    <x-button type="primary">确定</x-button>
                </div>
            </swiper-item>
        </swiper>
        <countdown slot="value" v-show="false" v-model="smsCodeCD" :start="cdStart" @on-finish="smsCodeDone"></countdown>
    </div>
</template>
<script>
import {
    Countdown,
    ButtonTab,
    ButtonTabItem,
    Tab,
    TabItem,
    XButton,
    Swiper,
    SwiperItem,
    XInput,
    Group,
    Cell
} from 'vux'
import api from '../api'
import {
    mapState,
    mapActions
} from 'vuex'
import { taskAndTag } from "./mixin";

let cdtime = 60;
export default {
    components: {
        Countdown,
        ButtonTab,
        ButtonTabItem,
        Tab,
        TabItem,
        XButton,
        Swiper,
        SwiperItem,
        XInput,
        Group,
        Cell
    },
    activated:function(){
        if(!this.uid) return this.$vux.toast.show({text: "请先登录",type: 'warn'});
        this.mobile = this.phone ;
        this.index = 0 ;
    },
    deactivated:function(){    
        // console.log("this.$refs.inpReset:",this.$refs.inpReset);
        this.$refs.inpReset.reset("");
        this.$refs.inpReset1.reset("");
        this.$refs.inpReset2.reset("");
        this.$refs.inpReset3.reset("");
        this.$refs.inpReset4.reset("");
    },
    mixins: [taskAndTag],   
    computed: {        
        ...mapState({
            uid: state => state.vux.uid,
            phone: state => state.vux.phone
        })
    },
    methods: {
        doBindMob() {                        
            if (!this.isMob(this.mobile)) return this.$vux.toast.show({text: "手机号错误",type: 'warn'});
            if(!this.uid) return this.loginMob();
			api.smsBind({
				mobile: this.mobile, // 二次验证所需的三个值
				verifycode: this.verifycode,
                sms_type:1
			}).then(data => {
                if(data.errno !=0) return this.$vux.toast.show({text: data.errmsg ,type: 'warn'});
                this.verifycode = "";
				this.$store.commit("phone", {phone:this.mobile});
				this.$vux.toast.show({
					text: "绑定成功",
					type: 'success'
				})
				this.$router.back(-1);
            })
        },
        loginMob(){
            api.loginCode({
                mobile: this.mobile,
                verifycode: this.verifycode,
                sms_type:1
            }).then(data => {
                if(data.errno !=0) return this.$vux.toast.show({text: data.errmsg ,type: 'warn'});
                data = data.data;
                this.doWithLogin(data);
                this.$vux.toast.show({text:"直接登陆成功",type:'success'});
            })
        },
        doWithLogin(data){
            if (data.token) {
                window.localStorage.setItem('token', data.token);
            }
            this.$store.commit(Object.assign({ type: "user" }, data));
            this.$router.back(-1); //this.go("m_mine");
            this.$store.commit({ type: "z39/reset" });
            this.usertask();
        },
        doBindEmail() {

        },
        getMobCode() {
            console.log("getMobCode");
            if (this.phone && this.mobile == this.phone) return this.$vux.toast.show({text: "已绑定",type: 'warn'});
            if (!this.isMob(this.mobile)) return this.$vux.toast.show({text: "手机号错误",type: 'warn'});
			api.mobCode({
                mobile: this.mobile,
                type: 1
            }).then(data => {
				if(data == undefined) data={errmsg:"网络错误",errno:1001};
				if ( (data.hasOwnProperty("err_code") && data.err_code != "0") || (data.hasOwnProperty("errno") && data.errno != 0)) {
				  this.$vux.toast.show({text: data.msg|| data.errmsg,type: 'warn'})
				  return ;
				}
				this.$vux.toast.show({text: "获取成功",type: 'success',time: 1500})
                this.smsCodeCD = cdtime;
                this.cdStart = true;
                this.cding = true;                
                console.log(data);
            });
        },
        doUpdate() {
            if( !this.oldpassword.length ) return this.$vux.toast.show({text: "请输入旧密码",type: 'warn'});
            if( !this.password.length ) return this.$vux.toast.show({text: "请输入新密码",type: 'warn'});
            if( !this.password2.length ) return this.$vux.toast.show({text: "请再次输入",type: 'warn'});

            if(this.oldpassword.length <6 || this.oldpassword.length>20||this.password.length <6 || this.password.length>20||this.password2.length <6 || this.password2.length>20) return this.$vux.toast.show({text: "密码长度错误",type: 'warn'})
            
            if (this.password != this.password2) {
                this.$vux.toast.show({
                    text: "两次密码不一致",
                    type: 'warn',
                    time: 15000
                })
                return;
            }
            if( this.oldpassword == this.password ) return this.$vux.toast.show({text: "新旧密码一样",type: 'warn'}); 
			api.updatepwd({
                oldpassword: this.oldpassword,
                password: this.password,
                password2: this.password2
            }).then(data => {
                if(data.errno !=0) return this.$vux.toast.show({text: data.errmsg ,type: 'warn'});
                
				this.$vux.toast.show({
					text: "修改成功",
					type: 'success'
				})                
                console.log(data);
            });
        },
        smsCodeDone() {
            this.cding = false;
            console.log(this.cdStart);
            this.cdStart = false;
        }
    },
    data() {
        return {
            username: "",
            mobile: "",
            email: "",
            verifycode: "",
            password: "",
            password2: "",
            oldpassword: "",
            cdStart: false,
            cding: false,
            cdbtnStr: "获取",
            smsCodeCD: cdtime, //60
            index: 0,
            pwdIndex: 0,
            showMenus: false
        }
    }
}
</script>
<style lang="less">
.protocol input[type="checkbox"] {
    position: absolute;
    top: 0;
    left: -9999px;
    visibility: hidden;
}
</style>
